<template>
  <div class="container">
    <Category title="美食">
      <img src="https://s21.ax1x.com/2024/03/13/pFcBuh4.png" alt="">
    </Category>
    <Category title="游戏">
      <ul>
        <li v-for="item,index in games" :key="index">{{item}}</li>
      </ul>
    </Category>
    <Category title="电影">
      <video controls src="https://cn-jsnt-ct-01-06.bilivideo.com/upgcxcode/00/29/207222900/207222900-1-16.mp4?e=ig8euxZM2rNcNbRVhwdVhwdlhWdVhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1710328032&gen=playurlv2&os=bcache&oi=2043500563&trid=0000b77cc37e333a463b9a286e845258f7f7h&mid=0&platform=html5&upsig=689529a2bd1461924cc3578bcb9b2833&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,mid,platform&cdnid=4284&bvc=vod&nettype=0&f=h_0_0&bw=39412&logo=80000000"></video>
    </Category>
  </div>
</template>

<script>
  import Category from './components/Category.vue'
  export default {
      name:'App',
      data(){
        return{
          foods:['火锅','烧烤','小龙虾','牛排'],
          games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
          films:['《教父》','《拆弹专家》','《你好,李焕英》','《XXX》']
        }
      },
      components:{Category},
      methods:{
        
      }
  }
</script>

<style scoped>
  .container{
    display: flex;
    justify-content: space-around;
  }

</style>